<template>
  <page-loading :show="pageLoading">
    <!-- 选择我的爱车 -->
    <view class="content">
      <view
        class="selecboxsimg font-30 flex flex-ai-c"
        v-show="selectShow !== 1"
      >
        <view class="imgbrands">
          <image
            :src="
              'https://files.yzsheng.com/goodimg/brandimg/' +
              carInfo.brand_Id +
              '.png'
            "
            mode="aspectFit"
          ></image>
        </view>
        <view class="flex flex-ai-c flex-wrap-w">
          <view class="brandsboxs color-333" @click="backStep(1)">
            {{ carInfo.brand_Name }}
          </view>
          <view class="flex flex-ai-c">
            <view class="xiant ml-10"></view>
            <view class="1234 color-FBB000 ml-10" v-if="selectShow === 2">
              车系
            </view>
            <view class="ml-10" v-if="selectShow > 2" @click="backStep(2)">
              {{ carInfo.car_Type_Name }}
            </view>
          </view>
          <view class="flex flex-ai-c">
            <view class="xiant ml-10" v-if="selectShow > 2"></view>
            <view class="1234 color-FBB000 ml-10" v-if="selectShow === 3">
              排量
            </view>
            <view class="ml-10" v-if="selectShow > 3" @click="backStep(3)">
              {{ carInfo.displacement }}
            </view>
          </view>
          <view class="flex flex-ai-c">
            <view class="xiant ml-10" v-if="selectShow > 3"></view>
            <view class="1234 color-FBB000 ml-10" v-if="selectShow === 4">
              年款
            </view>
            <view class="ml-10" v-if="selectShow === 5" @click="backStep(4)">
              {{ carInfo.yeartype }}
            </view>
          </view>
          <view class="flex flex-ai-c">
            <view class="xiant ml-10" v-if="selectShow === 5"></view>
            <view class="1234 color-FBB000 ml-10" v-if="selectShow === 5">
              22版本
            </view>
            <view class="ml-10" v-if="selectShow === 6" @click="backStep(5)">
              {{ carInfo.yeartype }}
            </view>
          </view>
        </view>
      </view>
      <!-- 品牌 -->
      <view v-show="selectShow === 1" class="brands">
        <scroll-view
          scroll-y="true"
          style="height: 100vh"
          :scroll-into-view="addtoView"
        >
          <view class="headtext font-34 color-333 ml-20"> 品牌 </view>
          <view class="history" v-show="hotBrandList.length">
            <view class="1234"> 热门品牌 </view>
            <view class="flex flex-wrap-w">
              <view
                class="hisxbox"
                v-for="(item, index) in hotBrandList"
                :key="index"
                @tap="searchBrand(item, 0)"
              >
                <view class="imgbrand">
                  <image
                    :src="
                      'https://files.yzsheng.com/goodimg/brandimg/' +
                      item.brandId +
                      '.png'
                    "
                    mode="aspectFit"
                  ></image>
                </view>
                <view class="histext">{{ item.branName }}</view>
              </view>
            </view>
          </view>
          <view class="boxsds">
            <view
              v-for="(item, index) in Brandlist"
              :id="item.initial"
              :key="item.initial"
            >
              <view class="abcd">
                {{ item.initial }}
              </view>
              <view class="Brandcsss">
                <view
                  class="list-cell"
                  v-for="(item1, index1) in item.data"
                  :key="index1"
                >
                  <view class="brandcss" @tap="searchBrand(item1, 1)">
                    <view class="iconimgs">
                      <image
                        :src="
                          'https://files.yzsheng.com/goodimg/brandimg/' +
                          item1.bid +
                          '.png'
                        "
                        mode="aspectFit"
                      ></image>
                    </view>
                    <view class="area">{{ item1.brand }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="floor">
              <view
                v-for="(item, index) in indexlist"
                :data-id="item"
                :key="index"
                @tap="addressToView"
              >
                {{ item }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 系列 -->
      <view v-show="selectShow === 2" class="xilie">
        <view class="ppbox mt-20">
          <view class="containepp">
            <view
              class="bjcolor"
              style="padding: 0rpx 20rpx; height: 100%; margin-top: 0px"
            >
              <view
                class="list-cell"
                v-for="(item, index) in Serieslist"
                :key="index"
                @tap="seriesbtn(item)"
              >
                <text class="name">{{ item.carTypeName }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 排量 -->
      <view v-show="selectShow === 3" class="xilie">
        <view class="ppbox mt-20">
          <view class="containepp">
            <view
              class="bjcolor"
              style="padding: 0rpx 20rpx; height: 100%; margin-top: 0px"
            >
              <view
                class="list-cell"
                v-for="(item, index) in displacement"
                :key="index"
                @tap="sdisplacementbtn(item)"
              >
                <text class="name">{{ item.displacement }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 年款 -->
      <view v-show="selectShow === 4" class="xilie">
        <view class="ppbox mt-20">
          <view class="containepp">
            <view
              class="bjcolor"
              style="padding: 0rpx 20rpx; height: 100%; margin-top: 0px"
            >
              <view
                class="list-cell"
                v-for="(item, index) in modelyear"
                :key="index"
                @tap="modelyearbtn(item, index)"
              >
                <text class="name">{{ item.data }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 车子 -->
      <view v-show="selectShow === 5" class="carname">
        <view class="ppbox1 mt-20">
          <view class="containepp">
            <view class="bjcolor" style="padding: 0rpx 20rpx; margin-top: 0rpx">
              <view
                class="list-cell"
                v-for="(item, index) in Configurationlist"
                :key="index"
                @tap="Configbtn(item)"
              >
                <view class="name1">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view></page-loading
  >
</template>

<script src="./addYourCar.js"></script>
<style lang="scss" scoped>
@import './addYourCar.scss';
</style>
